import React from 'react';
import { useTranslation } from 'react-i18next';
import { getDynamicFonts } from '@/utils/fontUtils';

interface TabRichContentProps {
    tabKey: string;
}

const TabRichContent: React.FC<TabRichContentProps> = ({ tabKey }) => {
    const { t, i18n } = useTranslation();
    const dynamicFonts = getDynamicFonts(i18n);


    // 渲染不同tab下的内容
    if (tabKey === 'girl') { 
        return (
            <div className="space-y-8 mt-8 border border-[#282828] rounded-[10px] p-8" style={{ background: '#1A1A1A', fontFamily: dynamicFonts.font4 }}>
                <h1 className="text-white md:text-3xl text-xl font-bold leading-10 self-stretch">
                    {t('home.rich.girl.h1_1')}
                    <span className="text-[rgb(252,118,138)]">{t('home.rich.girl.h1_1_span')}</span>
                </h1>
                <p className="text-[#A4A4A4] font-sm md:text-[16px] text-sm" style={{ fontFamily: dynamicFonts.font2 }}>{t('home.rich.girl.p1')}</p>
                <p className="text-[#A4A4A4] font-sm md:text-[16px] text-sm" style={{ fontFamily: dynamicFonts.font2 }}>{t('home.rich.girl.p2')}</p>
                <h2 className="text-white md:text-[1.8rem] text-lg font-bold leading-10 self-stretch">{t('home.rich.girl.h2_1')}</h2>
                <p className="text-[#A4A4A4] font-sm md:text-[16px] text-sm" style={{ fontFamily: dynamicFonts.font2 }}>{t('home.rich.girl.p3')}</p>
                <p className="text-[#A4A4A4] font-sm md:text-[16px] text-sm" style={{ fontFamily: dynamicFonts.font2 }}>{t('home.rich.girl.p4')}</p>
                <h2 className="text-white md:text-[1.8rem] text-lg font-bold leading-10 self-stretch">{t('home.rich.girl.h2_2')}</h2>
                <p className="text-[#A4A4A4] font-sm md:text-[16px] text-sm" style={{ fontFamily: dynamicFonts.font2 }}>{t('home.rich.girl.p5')}</p>
                <p className="text-[#A4A4A4] font-sm md:text-[16px] text-sm" style={{ fontFamily: dynamicFonts.font2 }}>{t('home.rich.girl.p6')}</p>
                <h2 className="text-white md:text-[1.8rem] text-lg font-bold leading-10 self-stretch">{t('home.rich.girl.h2_3')}</h2>
                <p className="text-[#A4A4A4] font-sm md:text-[16px] text-sm" style={{ fontFamily: dynamicFonts.font2 }}>{t('home.rich.girl.p7')}</p>
                <p className="text-[#A4A4A4] font-sm md:text-[16px] text-sm" style={{ fontFamily: dynamicFonts.font2 }}>{t('home.rich.girl.p8')}</p>
                <h2 className="text-white md:text-[1.8rem] text-lg font-bold leading-10 self-stretch">{t('home.rich.girl.h2_4')}</h2>
                <p className="text-[#A4A4A4] font-sm md:text-[16px] text-sm" style={{ fontFamily: dynamicFonts.font2 }}>{t('home.rich.girl.p9')}</p>
                <p className="text-[#A4A4A4] font-sm md:text-[16px] text-sm" style={{ fontFamily: dynamicFonts.font2 }}>{t('home.rich.girl.p10')}</p>
                <h2 className="text-white md:text-[1.8rem] text-base font-bold leading-10 self-stretch">{t('home.rich.girl.h2_5')}</h2>
                <p className="text-[#A4A4A4] font-sm md:text-[16px] text-sm text-justify" style={{ fontFamily: dynamicFonts.font2 }}><em>{t('home.rich.girl.quote1')}</em></p>
                <p className="text-[#A4A4A4] font-sm md:text-[16px] text-sm text-justify" style={{ fontFamily: dynamicFonts.font2 }}><em>{t('home.rich.girl.quote2')}</em></p>
                <p className="text-[#A4A4A4] font-sm md:text-[16px] text-sm text-justify" style={{ fontFamily: dynamicFonts.font2 }}><em>{t('home.rich.girl.quote3')}</em></p>
                <p className="text-[#A4A4A4] font-sm md:text-[16px] text-sm text-justify" style={{ fontFamily: dynamicFonts.font2 }}><em>{t('home.rich.girl.quote4')}</em></p>
                <p className="text-[#A4A4A4] font-sm md:text-[16px] text-sm text-justify" style={{ fontFamily: dynamicFonts.font2 }}><em>{t('home.rich.girl.quote5')}</em></p>
                <h2 className="text-white md:text-[1.8rem] text-base font-bold leading-10 self-stretch">{t('home.rich.girl.h2_6')}</h2>
                <p className="text-[#A4A4A4] font-sm md:text-[16px] text-sm" style={{ fontFamily: dynamicFonts.font2 }}>{t('home.rich.girl.p11')}</p>
                <p className="text-[#A4A4A4] font-sm md:text-[16px] text-sm" style={{ fontFamily: dynamicFonts.font2 }}>{t('home.rich.girl.p12')}</p>
            </div>
        );
    }
    if (tabKey === 'man') {
        return (
            <div className="space-y-8 mt-8 border border-[#282828] rounded-[10px] p-8" style={{ background: '#1A1A1A' }}>
                <h1 className="text-white md:text-3xl text-xl font-bold leading-10 self-stretch">
                    {t('home.rich.man.h1_1')}
                    <span className="text-[rgb(252,118,138)]">{t('home.rich.man.h1_1_span')}</span>
                </h1>
                <p className="text-[#A4A4A4] font-sm md:text-[16px] text-sm" style={{ fontFamily: dynamicFonts.font2 }}>{t('home.rich.man.p1')}</p>
                <h2 className="text-white md:text-[1.8rem] text-lg font-bold leading-10 self-stretch">{t('home.rich.man.h2_1')}</h2>
                <p className="text-[#A4A4A4] font-sm md:text-[16px] text-sm" style={{ fontFamily: dynamicFonts.font2 }}>{t('home.rich.man.p2')}</p>
                <h2 className="text-white md:text-[1.8rem] text-lg font-bold leading-10 self-stretch">{t('home.rich.man.h2_2')}</h2>
                <p className="text-[#A4A4A4] font-sm md:text-[16px] text-sm" style={{ fontFamily: dynamicFonts.font2 }}>{t('home.rich.man.p3')}</p>
                <p className="text-[#A4A4A4] font-sm md:text-[16px] text-sm" style={{ fontFamily: dynamicFonts.font2 }}>{t('home.rich.man.p4')}</p>
                <h2 className="text-white md:text-[1.8rem] text-lg font-bold leading-10 self-stretch">{t('home.rich.man.h2_3')}</h2>
                <p className="text-[#A4A4A4] font-sm md:text-[16px] text-sm" style={{ fontFamily: dynamicFonts.font2 }}>{t('home.rich.man.p5')}</p>
                <p className="text-[#A4A4A4] font-sm md:text-[16px] text-sm" style={{ fontFamily: dynamicFonts.font2 }}>{t('home.rich.man.p6')}</p>
                <h2 className="text-white md:text-[1.8rem] text-lg font-bold leading-10 self-stretch">{t('home.rich.man.h2_4')}</h2>
                <p className="text-[#A4A4A4] font-sm md:text-[16px] text-sm" style={{ fontFamily: dynamicFonts.font2 }}>{t('home.rich.man.p7')}</p>
                <h2 className="text-white md:text-[1.8rem] text-lg font-bold leading-10 self-stretch">{t('home.rich.man.h2_5')}</h2>
                <p className="text-[#A4A4A4] font-sm md:text-[16px] text-sm" style={{ fontFamily: dynamicFonts.font2 }}>{t('home.rich.man.p8')}</p>
                <p className="text-[#A4A4A4] font-sm md:text-[16px] text-sm" style={{ fontFamily: dynamicFonts.font2 }}>{t('home.rich.man.p9')}</p>
                <h2 className="text-white md:text-[1.8rem] text-lg font-bold leading-10 self-stretch">{t('home.rich.man.h2_6')}</h2>
                <p className="text-[#A4A4A4] font-sm md:text-[16px] text-sm" style={{ fontFamily: dynamicFonts.font2 }}>{t('home.rich.man.quote1')}</p>
                <p className="text-[#A4A4A4] font-sm md:text-[16px] text-sm" style={{ fontFamily: dynamicFonts.font2 }}>{t('home.rich.man.quote2')}</p>
                <p className="text-[#A4A4A4] font-sm md:text-[16px] text-sm" style={{ fontFamily: dynamicFonts.font2 }}>{t('home.rich.man.quote3')}</p>
                <p className="text-[#A4A4A4] font-sm md:text-[16px] text-sm" style={{ fontFamily: dynamicFonts.font2 }}>{t('home.rich.man.quote4')}</p>
                <p className="text-[#A4A4A4] font-sm md:text-[16px] text-sm" style={{ fontFamily: dynamicFonts.font2 }}>{t('home.rich.man.quote5')}</p>
                <p className="text-[#A4A4A4] font-sm md:text-[16px] text-sm" style={{ fontFamily: dynamicFonts.font2 }}>{t('home.rich.man.quote6')}</p>
                <h2 className="text-white md:text-[1.8rem] text-lg font-bold leading-10 self-stretch">{t('home.rich.man.h2_7')}</h2>
                <p className="text-[#A4A4A4] font-sm md:text-[16px] text-sm" style={{ fontFamily: dynamicFonts.font2 }}>{t('home.rich.man.p11')}</p>
                <p className="text-[#A4A4A4] font-sm md:text-[16px] text-sm" style={{ fontFamily: dynamicFonts.font2 }}>{t('home.rich.man.p12')}</p>
            </div>
        );
    }
    if (tabKey === 'anime_girl') {
        return (
            <div className="space-y-8 mt-8 border border-[#282828] rounded-[10px] p-8" style={{ background: '#1A1A1A' }}>
                <h1 className="text-white md:text-3xl text-xl font-bold leading-10 self-stretch">
                    {t('home.rich.anime_girl.h1_1')}
                    <span className="text-[rgb(252,118,138)] ml-2">{t('home.rich.anime_girl.h1_1_span')}</span>
                </h1>
                <p className="text-[#A4A4A4] font-sm md:text-[16px] text-sm" style={{ fontFamily: dynamicFonts.font2 }}>{t('home.rich.anime_girl.p1')}</p>
                <p className="text-[#A4A4A4] font-sm md:text-[16px] text-sm" style={{ fontFamily: dynamicFonts.font2 }}>{t('home.rich.anime_girl.p2')}</p>
                <p className="text-[#A4A4A4] font-sm md:text-[16px] text-sm" style={{ fontFamily: dynamicFonts.font2 }}>{t('home.rich.anime_girl.p3')}</p>
                <p className="text-[#A4A4A4] font-sm md:text-[16px] text-sm" style={{ fontFamily: dynamicFonts.font2 }}>{t('home.rich.anime_girl.p4')}</p>
                <p className="text-[#A4A4A4] font-sm md:text-[16px] text-sm" style={{ fontFamily: dynamicFonts.font2 }}>{t('home.rich.anime_girl.p5')}</p>
            </div>
        );
    }
    if (tabKey === 'anime_man') {
        return (
            <div className="space-y-8 mt-8 border border-[#282828] rounded-[10px] p-8" style={{ background: '#1A1A1A' }}>
                <h1 className="text-white md:text-3xl text-xl font-bold leading-10 self-stretch">
                    {t('home.rich.anime_man.h1_1')}
                    <span className="text-[rgb(252,118,138)] ml-2">{t('home.rich.anime_man.h1_1_span')}</span>
                </h1>
                <p className="text-[#A4A4A4] font-sm md:text-[16px] text-sm" style={{ fontFamily: dynamicFonts.font2 }}>{t('home.rich.anime_man.p1')}</p>
                <p className="text-[#A4A4A4] font-sm md:text-[16px] text-sm" style={{ fontFamily: dynamicFonts.font2 }}>{t('home.rich.anime_man.p2')}</p>
                <p className="text-[#A4A4A4] font-sm md:text-[16px] text-sm" style={{ fontFamily: dynamicFonts.font2 }}>{t('home.rich.anime_man.p3')}</p>
                <p className="text-[#A4A4A4] font-sm md:text-[16px] text-sm" style={{ fontFamily: dynamicFonts.font2 }}>{t('home.rich.anime_man.p4')}</p>
                <p className="text-[#A4A4A4] font-sm md:text-[16px] text-sm" style={{ fontFamily: dynamicFonts.font2 }}>{t('home.rich.anime_man.p5')}</p>
            </div>
        );
    }
    return null;
};

export default TabRichContent; 